<template>
	<view style="padding: 0;height: 100vh;" v-if="courseData.content">
		<!-- 基础 -->
		<template v-if="courseData.content.language == 'EN'">
			<!-- 学习 -->
			<base-learn :cont="courseData.content" v-if="courseData.content.courseType == 'LEARN'" />
			<!-- 复习 -->
			<base-review :cont="courseData.content" v-if="courseData.content.courseType == 'REVIEW'" />
			<!-- 练习 -->
			<base-practice :cont="courseData.content" v-if="courseData.content.courseType == 'PRACTICE'" />
			<!-- 游戏 -->
			<base-game :cont="courseData.content" v-if="courseData.content.courseType == 'GAME'" />
			<!-- COPY -->
			<en-copy :cont="courseData.content" v-if="courseData.content.courseType == 'COPY'" />
			<!-- 单词专项 -->
			<en-words :cont="courseData.content" v-if="courseData.content.courseType == 'ENWORD'" />
		</template>
		<template v-if="courseData.content.language == 'CN'">
			<!-- 双拼 -->
			<cn-double-pinyin :cont="courseData.content" v-if="courseData.content.courseType == 'PRACTICE'" />
			<!-- COPY -->
			<cn-copy :cont="courseData.content" v-if="courseData.content.courseType == 'COPY'" />
		</template>
	</view>
</template>
<script setup>
	import { baseList } from '@/components/keyboard.js';
	import { computed, defineComponent, nextTick, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { courseDetail, getCourseLastActive } from '@/common/js/getData.js';
	import { checkLocalCharacter } from '@/common/js/character.js';
	import { saveActive } from '@/common/api/course.js';
	import baseLearn from './components/base-learn.vue';
	import baseReview from './components/base-review.vue';
	import basePractice from './components/base-practice.vue';
	import baseGame from './components/base-game.vue';
	import cnDoublePinyin from './components/cn-double-pinyin.vue';
	import cnCopy from './components/cn-copy.vue';
	import enCopy from './components/en-copy.vue';
	import enWords from './components/en-words.vue';
	defineComponent({ baseLearn, baseReview, basePractice, baseGame, cnDoublePinyin, cnCopy, enCopy, enWords });
	const courseData = reactive({
		courseId: '',
		content: null
	})
	try {
		checkLocalCharacter();
		onLoad((options) => {
			if (options.id) {
				courseData.courseId = options.id;
				init();
			}
		})
	} catch (e) {}
	// 初始化数据
	async function init() {
		// 获取本地数据
		const courseContent = getApp().globalData.dzdata?.courseItem;
		if (courseContent) {
			courseData.content = courseContent;
		}
		// 请求实时数据
		const res = await courseDetail({ courseId: courseData.courseId });
		courseData.content = res;
		// 设置选中
		await setLastActive(res);
		// 更新选中
		getCourseLastActive();
	}
	// 设置最后一次选中
	async function setLastActive(item) {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		return await saveActive({
			characterId,
			item: {
				name: item.name,
				courseId: item.courseId,
				chapter: item.chapter,
				category: item.category,
				courseGroupName: item.courseGroupName,
				courseText: item.courseText,
				courseType: item.courseType,
				language: item.language
			}
		})
	}
</script>
<style>
	page {
		background: linear-gradient(0deg, rgb(49, 52, 63), rgb(49, 52, 63)), linear-gradient(0deg, rgba(49, 52, 63, 0.25), rgba(49, 52, 63, 0.25)), linear-gradient(0deg, rgb(34, 37, 45), rgb(34, 37, 45)), rgb(249, 250, 252);
	}
</style>
<style scoped lang="scss">
	.box {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 30px;
	}
	.item {
		font-size: 20px;
		.char {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid grey;
			border-radius: 4px;
			font-size: 1em;
			height: 75px;
			margin: 10px;
			padding: 10px;
			width: 75px;
		}
		.text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 50px;
			margin: 0 1px;
			font-size: 30px;
			&.space {
				position: relative;
				border-bottom: 3px solid var(--my-text-color-placeholder);
				&:before,
				&:after {
					background-color: var(--my-text-color-placeholder);
					content: "";
					height: 1px;
					position: absolute;
					width: 1.5px;
				}
				&:before {
					bottom: 0;
					left: 0;
				}
				&:after {
					bottom: 0;
					right: 0;
				}
			}
		}
		&.cursor {
			border-bottom: 1px solid #2878ff;
		}
	}
	.warn {
		background-color: #ffe9b2;
		color: #0e630e;
	}
	.success {
		background-color: #e7fbd3;
		color: #0e630e;
	}
	.error {
		background-color: pink;
		color: #8b0000
	}
	.stats {
		text {
			margin: 0 10px;
		}
	}
</style>